<template>
  <div class="Me-Me">
    <div class="Me-top">
      <div>
        <span class="iconfont icon-saoyisao"> </span>
        <span>
          <nav class="iconfont icon-lingdang"></nav>
          <nav ><el-button type="text" @click="open" class="Me-button01" >退出登录</el-button></nav>
        </span>
      </div>
    </div>
    <div class="Me-head">
      <span>
        <div>
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
        </div>
      </span>
      <span>
        得物大魔王
      </span>
    </div>
    <div class="Me-head-number">
      <span>
        <p>0</p>
        获赞 </span
      ><span>
        <p>0</p>
        粉丝</span
      ><span>
        <p>0</p>
        关注</span
      ><span>
        <p>0</p>
        动态
      </span>
    </div>
    <div class="Me-centent">
      <div class="Me-centent-top">
        <div>
          <span class="iconfont icon-wodezuji"></span><span>足迹 0</span>
        </div>
        
        <div>
          <span class="iconfont icon-dingyue-"></span><span>订阅 0</span>
        </div>
      </div>
      <div class="Me-centent-centent">
        <h5>
          <span>购买</span><span>0
          </span>
          
        </h5>
        <div>
         <nav>
            <span class="iconfont icon-weibiaoti2fuzhi04"> </span>
          <p>待付款</p>
         </nav>
          <nav>
            <span class="iconfont icon-daifahuo"> </span>
          <p>待发货</p>
          </nav>
          <nav>
            <span class="iconfont icon-daishouhuo"> </span>
          <p>待收货</p>
          </nav>
          <nav>
            <span class="iconfont icon-tuikuanshouhou"> </span>
          <p>退款售后</p>
          </nav>
          <nav>
            <span class="iconfont icon-qiugou"> </span>
          <p>求购</p>
          </nav>
        </div>
      </div>
      <div class="Me-centent-bottom">
         <h5>
          <span>购买</span>
        </h5>
        <div>
         <nav>
            <p>9</p>
          <p>优惠券</p>
         </nav>
          <nav>
            <p>￥0.00</p>
          <p>津贴</p>
          </nav>
          <nav>
            <p>￥0.00</p>
          <p>余额</p>
          </nav>
          <nav>
            <p>￥5万</p>
          <p>佳物分期</p>
          </nav>
          
        </div>
        
      </div>
    </div>
    <div>
      <Footer />
    </div>
  </div>
</template>

<script>
import { NoticeBar } from 'vant';
import Vue from 'vue';
import { Badge } from 'vant';

Vue.use(Badge);
Vue.use(NoticeBar);
export default {
   methods: {
      open() {
       
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           localStorage.clear()
           
          this.$message({
            
            type: 'success',
            message: '退出成功!'
            
          });
          location.reload();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登录'
          });          
        });
      }
      
    }
};
</script>

<style >
.el-message-box{
  width: 3rem;
}
.Me-button01{
  border: none;
  width: 1rem;
  line-height: .1rem;
  background: rgb(23, 219, 209);
  color: white;
  font-size: .14rem;
}
 .notice-swipe {
    height: .4rem;
    line-height: .2rem;
  }
.Me-heart{
    margin: auto;
  margin-top: .6rem;
  width: 100%;
  height: .4rem;
  background: rgba(236, 236, 236, 0.767);
  line-height: .4rem;
  display: flex;
}
.Me-heart p{
  font-size: .14rem;
  font-family: "楷体";
  margin-left: .1rem;
  font-weight: bolder;
}
.Me-centent {
  margin-top: 0rem;
  margin-bottom: 0rem;
  flex: 1;
  background: rgba(248, 248, 248, 0.644);
}
.iconfont {
  font-size: 0.14rem;
  font-weight: bolder;
}
.Me-centent-centent {
  width: 90%;
  height: 1rem;
  margin: auto;
  background: white;
  margin-top: 0.1rem;
  display: flex;
  flex-direction: column;
}
.Me-centent-centent h5{
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  color: rgb(136, 133, 133);
}
.Me-centent-centent {
  width: 90%;
  height: 1rem;
  margin: auto;
  background: white;
  margin-top: 0.1rem;
  display: flex;
  flex-direction: column;
}
.Me-centent-bottom {
  width: 90%;
  min-height: 1rem;
  margin: auto;
  background: white;
  margin-top: 0.1rem;
  display: flex;
  flex-direction: column;
}
.Me-centent-bottom h5{
  width: 90%;
  margin: auto;
  margin-top: .2rem;
  display: flex;
  justify-content: space-between;
  color: rgb(136, 133, 133);
}
.Me-centent-centent div{
   width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;

}
.Me-centent-centent div nav{
  text-align: center;
}
.Me-centent-centent div nav p{
  margin-top: .1rem;
}
.Me-centent-bottom div nav{
  text-align: center;
}
.Me-centent-bottom div nav p{
margin-top: .1rem;
}
.Me-centent-bottom div{
   width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;    
}
.Me-centent-centent h5 span{
  line-height: .2rem;
  display: flex;
}

.Me-centent-top {
  width: 90%;
  height: 0.7rem;
  margin: auto;
  background: white;
  margin-top: 0.1rem;
  display: flex;
}
.Me-centent-top div {
  width: 50%;
  text-align: center;
  line-height: 0.7rem;
}
.icon-wodezuji {
  font-size: 0.18rem;
}
.icon-dingyue- {
  font-size: 0.18rem;
}
.Me-head-number {
  width: 100%;
  height: 1rem;
  margin: auto;
  display: flex;
  margin-top: 0rem;
  margin-bottom: 0rem;
  display: flex;
}
.Me-head-number span {
  width: 25%;
  text-align: center;
}
.Me-head-number span p {
  font-weight: bold;
}
.Me-head {
  width: 90%;
  height: 0.8rem;
  margin: auto;
  margin-bottom: 0rem;
  margin-top: 1rem;
  display: flex;
}
.Me-head span {
  display: flex;
}
.Me-head span:nth-child(1) {
  height: 0.6rem;
  width: 0.6rem;
}
.Me-head span:nth-child(2) {
  height: 0.6rem;
  width: 2rem;
  line-height: 0.6rem;
  margin-left: 0.2rem;
}
.Me-Me {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.Me-top {
  width: 100%;
  height: 0.6rem;
  background: white;
  position: fixed;
  top: 0rem;
  font-size: 0.16rem;
}
.Me-top div {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: auto;
  margin-top: 0.3rem;
}
.Me-top div span:nth-child(2) {
  display: flex;
}
.Me-top div span:nth-child(2) nav:nth-child(1) {
  width: 0.5rem;
}
</style>